<template>
  <uni-nav-bar title="报销" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <!-- 切换 -->
  <z-tabs ref="tabs" :list="list" :current="current" @change="tabsChange" inactive-color="#333" />
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" :style="{ height: pageHeight + 'px'}">
    <view class="package" v-for="(item,index) in attendanList" :key="index">
      <view class="space-between">
        <view>{{item.staff_name}}申请的报销</view>
        <view>{{item.status_text}}</view>
      </view>
      <view class="top" style="font-size:26rpx;">报销金额：{{item.money}}</view>
      <view class="top" style="font-size:26rpx;">申请时间：{{item.createtime}}</view>
      <view class="top" style="font-size:26rpx;" v-if="item.updatetime">审批时间：{{item.updatetime}}</view>
      <view class="top">{{item.content}}</view>
      <view class="top" v-if="item.image" @click="open(item.image)">
        <image :src="item.image" mode="" style="width:100rpx;height:100rpx;"></image>
      </view>
      <view class="top" v-if="item.admin_name">{{item.admin_name}}审批</view>
      <view class="top space-between but" style="justify-content: space-around;" v-if="current===0">
        <view @click="submit(2,item.id)">拒绝</view>
        <view style="color: #fff;background: #3F90FF;" @click="submit(1,item.id)">同意</view>
      </view>
    </view>
    <Popu v-if="attendanList.length<1" :pageHeight="pageHeight" text="暂无报销记录"></Popu>
  </scroll-view>
  <uni-popup ref="popup" type="center">
    <image style="width: 600rpx;border-radius: 5px;" mode="widthFix" :src="image" @click="close()"></image>
  </uni-popup>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { navBack } from '@/utils/navigator';
  import { toPublish } from '@mqtt';
  import { getBaoxiaoList } from '@/gql/warehouse';
  import Popu from '@c/earthPushing/common/popu.vue';
  import { errorToast, showLoading, successToast } from '@/utils/prompt';
  import { getDriverID } from '@/stores/driverID';
  /**
   * 地推报销列表
   * @param admin_id 操作人ID
   * @param list 报销类型信息
   * @param current 选项索引-
   * @param listID 福利品类型ID-
   * @param pageHeight 页面高度
   * @param attendanList 报销列表
   * @param lastPage 总页数
   * @param currentPage 当前页数
   * @param popup 展示地推提交图片弹框
   * @param image 图片信息
   */
  const admin_id = getDriverID();
  const list = [{ name: '待审批' }, { name: '已审批' }]
  const attendanList = ref([])
  const lastPage = ref(1);
  const currentPage = ref(1);
  const pageHeight = ref()
  const current = ref(0)
  const popup = ref(null)
  const image = ref()
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 55;
    },
  });
  init()
  /**
   * 获取地推报销列表
   */
  function init() {
    showLoading()
    const payload = {
      query: getBaoxiaoList,
      variables: {
        page: currentPage.value,
        type: current.value,
      },
    };
    toPublish(
      'ql/control/getBaoxiaoList',
      payload,
      (obj : any) => {
        const { getBaoxiaoList } = obj.data;
        attendanList.value = [...attendanList.value, ...getBaoxiaoList.list];
        lastPage.value = getBaoxiaoList.lastpage;
        console.log(attendanList.value)
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
  //tabs通知swiper切换
  function tabsChange(index : number) {
    current.value = index;
    currentPage.value = 1;
    attendanList.value = [];
    init();
  }
  /**
   * 提交地推报销审核
   * @param status 审核状态 1同意 2拒绝
   * @param  id 报销ID
   */
  function submit(status : number, id : number) {
    showLoading()
    const payload = {
      admin_id,
      id,
    };
    const topic = status === 1 ? 'control/agreeBaoxiao' : 'control/refuseBaoxiao'
    toPublish(topic,
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
          tabsChange(1)
        } else {
          errorToast(msg)
        }
      }
    );
  }
  /**
   * 打开图片弹框
   * @param im 图片信息
   */
  function open(im : string) {
    image.value = im
    popup.value.open();
  }
  /**
   * 关闭图片弹框
   */
  function close() {
    popup.value.close();
  }
</script>

<style scoped lang="less">
  .top {
    margin-top: 15rpx;
  }

  .but {
    margin-top: 30rpx;

    view {
      width: 40%;
      height: 80rpx;
      background: #ECF0F6;
      border-radius: 10rpx;
      text-align: center;
      line-height: 80rpx;
      color: #3F90FF;
    }
  }
</style>